import React from 'react';
import PropTypes from 'prop-types';

import { Link } from 'react-router-dom';
// 我的文章
class MyArticleItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    }
    this.deleteArticle = this.deleteArticle.bind(this)
  }
  componentDidMount() {

  }
  // 过滤数据
  filter(data) {
    // 简单的去掉script标签
    const reg1 = new RegExp('(<SCRIPT)[\\s\\S]*?((</SCRIPT>)|(/?>))', 'gi')
    const reg2 = new RegExp('<script>.*<\/script>', 'gi')
    return {
      // 标题
      postTitle: data.title.rendered,
      // 文章发布日期
      date: data.date.substr(0, 10),
      // 文章Id
      id: data.id,
      // 文章内容
      excerpt: data.excerpt.rendered.replace(reg2, '').replace(reg1, '').replace(/(<a.*?\/a>)/g, ''),
    }
  }
  // 删除文章
  deleteArticle(id) {
    this.props.deleteArticle(id)
  }
  render() {
    const data = this.filter(this.props.data);
    return (
      <div className="my-article-item">
        <h3 className="arc-title">
          <Link to={`article-detail/${data.id}`}>{data.postTitle}</Link>
          <span className="time">发表时间:{data.date}</span>
          <Link className="edit" to={`/post-article/edit/${data.id}`}>编辑</Link>
          <span className="delete" onClick={() => { this.deleteArticle(data.id) }}>删除</span>
        </h3>


        <p dangerouslySetInnerHTML={{ __html: data.excerpt }} />
      </div>
    )
  }
}
export default MyArticleItem;
MyArticleItem.propTypes = {
  deleteArticle: PropTypes.func,
  data: PropTypes.objectOf(Object),
}
